<template>
  <div class="container">
      <p class="head">汉服后台管理系统</p>
      <div class="main">
          <p class="p4">登录</p>
          <el-form >
                <el-form-item label="选择">
    <el-select v-model="region" placeholder="选择商家或者管理员登录">
      <el-option label="商家" value="sj"></el-option>
      <el-option label="管理员" value="gl"></el-option>
    </el-select>
  </el-form-item>
   <el-form-item label="账号">
    <el-input v-model="adm.username"></el-input>
  </el-form-item>
  <el-form-item label="密码">
    <el-input v-model="adm.password"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm">登录</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
<div class="tozc" @click=" zc">没有账号?点击-->去注册</div>
      </div>

      <div class="tu">
          <img src="../../assets/555.jpg" alt="">
      </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
    data(){
        return{
            adm:{
                username:"",
                password:""

            },
            region:""
        }
    },
    methods:{
        submitForm(){
            if(this.region == "sj"){
                axios.post('/stores/login',this.adm).then(({data}) => {
        if(data.success){
            alert("登录成功")
            this.$router.push('/StoresSystem');
        }else{
            alert("登录失败")
        }
        })
            } if(this.region == "gl"){
                axios.post('/adm/login',this.adm).then(({data}) => {
                console.log(data)
        if(data){
            alert("登录成功")
            this.$router.push('/StoresSystem');
        }else{
            alert("登录失败")
        }
        })
            }       
        },
        zc(){
        this.$router.push('/register');
    }
    },
    
}
</script>

<style>
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
.container{
    width: 100%;
    height: 100%;
    background: #2c3e50;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #3498db, #2c3e50);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #3498db, #2c3e50); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
overflow: hidden;
}
.main{
    height: 300px;
    width: 400px;
    background: white;
    position: absolute;
    right: 30%;
    top:50%;
    margin-left:-200px;
/*设置为宽度的一半*/
margin-top:-150px;

}
.head{
    font-size: 35px;
    font-weight: bold;
    text-align: center;
    display: block;
    margin-top:50px;

}
.p4{
    text-align: center;
    font-weight: bold;
    display: block;
    margin-bottom: 20px;
}
.el-input{
    width: 250px;
}
.el-form-item {
    margin-left: 45px;
}
.el-button{
    margin-left: 90px;
}
.tozc{
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 15px;
    color: red;
    cursor: pointer;
}
.tu img{
    width: 300px;
    height: 400px;
}
.tu{
    position: absolute;
    left: 20%;
    top:20%
}
</style>